<template>
  <div>
    <title-item>
      <em slot="title" @click="titleClick" class="flex"
        ><i :class="{ iconRatate: flag }" class="mr">&#xe73a;</i>热门播客</em
      >
      <em slot="text" class='hot-audio-right'>&#xe73a;<i class="hot-text">换一批</i></em>
    </title-item>
     <slides-2
        :imgs="HomePodcastSong"
        :imgClass="homePageImg"
        :textClass="pageText"
        :swiperOption="swiperOption"
      />
  </div>
</template>

<script>
import TitleItem from "components/content/title/TitleItem.vue";
import Slides2 from "components/common/swiper/Slides2";
  
  export default {
    name:'HotAudioView',
    props: {
      HomePodcastSong: {
      type: Array,
      default() {
        return [];
      }
    }
  },
    data() {
      return {
        flag: false,
        homePageImg: "recommend-page-img",
        pageText: "recommend-page-text",
        swiperOption: {
          notNextTick: true,
          //循环
          loop: false,
          //设定初始化时slide的索引
          initialSlide: 0,
          //视图显示个数
          slidesPerView: 3.5,
          // freeMode: true,
          touchRatio: 2, //触摸变慢
          //自动播放
          autoplay: false,
          //滑动速度
          speed: 1000,
          //滑动方向
          direction: "horizontal",
          paginationClickable: true,
          //小手掌抓取滑动
          grabCursor: true,
          //个体类名替换
          slideClass: "my-slide",
          wrapperClass: "my-wrapper",
          //滑动之后回调函数
          on: {
            slideChangeTransitionEnd: function() {
              // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
            }
          }
        }
    };
  },
  components: {
    TitleItem,
    Slides2
  },
   methods: {
    titleClick() {
      this.flag = !this.flag;
    }
  }
  }
</script>
<style lang="scss">
.hot-audio-right {
  padding:0 12px;
  font-size:12px;
}
.hot-text {
  font-size:16px;
  margin-left:5px;
}
</style>
